<template>
  <el-card v-loading="loading">
    <div v-if="hasUploadFiles&&hasUploadFiles.length>0" class="photolist">
      <div v-for="(item, i) in hasUploadFiles" :key="i" class="photobox">
        <el-image :src="`http://124.222.15.71:8191/api/hold/imgdownload?fileName=${item.photo}`" :lazy="true" class="avatar" />
        <el-button class="clearbtn" type="danger" icon="el-icon-delete" circle size="mini" @click="deleteUploadedPhoto(item.photo)" />
      </div>
    </div>
    <div class="photolist">
      <div v-for="(item, i) in photoList" :key="i" class="photobox">
        <el-image :src="item.isUploaded?``:item.result" fit="fill" :lazy="true" class="avatar" />
        <el-button class="clearbtn" type="danger" icon="el-icon-delete" circle size="mini" @click="deletePhoto(i)" />
        <!-- <el-button class="clearbtn" style="left:0;" type="success" icon="el-icon-top" circle size="mini" @click="saveImg(item, i)" /> -->
      </div>
      <div class="uploadImgBox">
        <input type="file" class="uploadImgBtn" name="document[file]" @change="uploadImgBtn">
        <i class="el-icon-plus avatar-uploader-icon" />
      </div>
    </div>
  </el-card>
</template>
<script>
import { deletePhoto, saveImg, getObjImg } from '@/api/photo'

export default {
  props: {
    isSingle: {
      type: Boolean,
      default: true
    },
    photoList: {
      type: Array,
      default: null
    },
    objid: {
      type: String,
      default: ''
    },
    objtype: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      hasUploadFiles: [],
      photo: '',
      file: {}
    }
  },
  methods: {
    uploadImgBtn(e) {
      const fileReader = new FileReader()
      if (e.target.files.length !== 0) {
        const files = e.target.files[0]
        fileReader.readAsDataURL(files)
        fileReader.onload = () => {
          files.isUploaded = false
          files.result = fileReader.result
          let photoList = this.photoList
          if (this.isSingle) {
            photoList = []
          }
          photoList.push(files)
          this.$emit('changeFileList', photoList)
        }
      }
    },
    getHasUploadFiles() {
      return this.hasUploadFiles
    },
    resetUploadFiles() {
      this.hasUploadFiles = []
    },
    deleteUploadedPhoto(photo) {
      if (this.hasUploadFiles.length <= 1) {
        this.$message.error('至少保留一张已上传的图片')
        return
      }
      this.$confirm('确定删除照片吗').then(() => {
        // 如果点击了确定就会进入then
        return deletePhoto(photo, this.objid)
      }).then(() => {
        this.getObjImg()
        this.$message.success('删除成功')
      })
    },
    deletePhoto(i) {
      const photoList = this.photoList
      photoList.splice(i, 1)
      this.$emit('changeFileList', photoList)
    },
    async saveImg(item, i) {
      const name = this.objid
      if (!name) {
        this.$message.error('请输入用户名')
        return
      }
      this.loading = true
      const formData = new FormData()
      formData.append('files', item)
      await saveImg(formData, name, this.objtype)
      if (this.hasUploadFiles.length !== 0 && this.isSingle) {
        deletePhoto(this.hasUploadFiles[0].photo, this.objid)
      }
      this.getObjImg()
      this.deletePhoto(i)
      this.loading = false
    },
    async getObjImg(name) {
      this.loading = true
      try {
        this.hasUploadFiles = await getObjImg(name || this.objid)
        this.loading = false
      } catch {
        this.loading = false
      }
    },
    saveImgAll() {
      const formData = new FormData()
      for (const item of this.photoList) {
        formData.append('files', item, item.name)
      }
      return saveImg(formData, this.objid, this.objtype)
    }
  }
}
</script>
<style>
  .btn {
    display: flow;
    float: right;
  }
</style>
